<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>登录页面</title>
    <link href="css/bootstrap.css" rel="stylesheet">

    <style >
        .error{
            font-size: 12px;
            color:red;
        }
        #login{
            font-size: 25px;
            font-weight: bold;
            margin-bottom: 10px;
        }
        input[type="button"]{
            margin-top: 20px;
            margin-left: 10px;
            background-color: #3b5167;
            color: white;
            font-size: 15px;
            padding: 5px 30px;
        }
        input[type="text"]{
            margin-top: 15px;
            width:150px ;
            height:25px;
            border: 1px solid #ddd
        }
        #password{
            margin-top: 20px;
            width:150px ;
            height:25px;
            border: 1px solid #ddd
        }
        #module{
            position: fixed;
            width: 100%;
            height: 100%;
        }
        #form{
            position: absolute;
            top: 30%;
            left: 0;
            right: 0;
            margin: 0 auto;
            width: 500px;
            padding: 5px;
        }
    </style>
</head>
<body>
<script type="text/javascript" src="js/jquery-3.6.4.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script type="text/javascript">
    /* (1）用户名不能为空
    （2）用户名必须在6-14位之间
    （3）用户名只能有数字和字母组成，不能含有其它符号（正则表达式）
    （4）邮箱地址合法验证。
    （5）统一失去焦点验证
    （6）错误提示信息统一在span标签中提示，并且要求字体12号，红色。
    （7）文本框再次获得焦点后，清空错误提示信息，如果文本框中数据不合法要求清空文本框的value
    （8）最终表单中所有项均合法方可提交
     */
    $(function (){
        $("#top").load("top.html")
        $.ajax({
            url:"/PDD/user?method=getCode",
            type:"post",
            success:function (data){
                //alert(data)
                $("#codeBtn").val(JSON.parse(data))
            }
        })
        let username = $("#username");
        let password=$("#password")
        let code=$("#code")
        let nameError=$("#nameError")[0]
        let passwordError=$("#passwordError")[0]
        let codeError=$("#codeError")[0]
        let autoLogin=$("#autoLogin")
        username.blur(function (){
            //用户名规范正则表达式
            let regex=/^[a-zA-Z0-9]+$/
            //用户名为空,出现错误提示信息
            let name=username.val()
            if(name===""){
                nameError.innerHTML="用户名不能为空"
            }else if(name.length<6||name.length>14){
                nameError.innerHTML="用户名必须在6-14位之间"
            }else if(!regex.test(name)){
                //不符合用户名的正则表达式
                nameError.innerHTML="用户名只能有数字和字母组成，不能含有其它符号"
            }else{
                nameError.innerHTML=""
            }
        })
        username.focus(function (){
            //重新进入,错误提示信息消失
            nameError.innerHTML=""
        })


        password.blur(function (){
            //密码的正则表达式(密码必须至少包含大小写字母+数字 最少六位)
            let pRegex = /\S*(?=\S{6,})(?=\S*\d)(?=\S*[A-Z])(?=\S*[a-z])\S*$/;
            let passwordInput=password.val()
            if(passwordInput===""){
                passwordError.innerHTML="密码不能为空"
            }else if(!pRegex.test(passwordInput)){
                passwordError.innerHTML="密码必须至少包含大小写字母+数字 最少六位"
            }else{
                passwordError.innerHTML=""
            }
        })
        password.focus(function (){
            passwordError.innerHTML=""
        })

        code.blur(function (){
            let code=$("#code").val()
            let rightCode=$("#codeBtn").val().toLowerCase()
            if(code===""){
                codeError.innerHTML="验证码不能为空"
            }else if(code!==rightCode){
                codeError.innerHTML="验证码错误"
            }else{
                codeError.innerHTML=""
            }
        })
        code.focus(function (){
            codeError.innerHTML=""
        })

        //验证码按钮绑定事件(点击更换验证码)
        $("#codeBtn").click(function (){
            $.ajax({
                url: "/PDD/user?method=getCode",
                type: "post",
                success: function (data) {
                    //alert(data)
                    $("#codeBtn").val(JSON.parse(data))
                }
            })
        })


        //给登录按钮绑定点击事件
        $("#loginBtn").click(function(){
            //只有当用户名和密码的校验都正确才能提交数据
            //如何知道校验都正确? 错误提示信息都为空
            //如何获取错误提示信息? 失去焦点事件触发->必须先获得焦点才能失去焦点

            //如何用js代码手动触发事件
            username.focus()
            username.blur()
            password.focus()
            password.blur()
            code.focus()
            code.blur()

            //判断错误提示信息是否为空
            if(nameError.innerHTML===""&&passwordError.innerHTML===""&&codeError.innerHTML===""){
                //单选框
                //如果自动登录选中就修改值为1
                if (autoLogin.is(":checked")) {
                    autoLogin.val("1");
                }
                //发送ajax请求 提交数据
                $.ajax({
                    url:"/PDD/user?method=login",
                    data:{
                        username:username.val(),
                        password:password.val(),
                        autoLogin:autoLogin.val()
                    },
                    dataType:"json",
                    type:"post",
                    success:function (data){
                        if(data.code!==-1){
                            /*//清空token
                            localStorage.clear();
                            //储存token
                            localStorage.token=data.data;*/
                            //返回到前端
                            if(data.data===0) {
                                //消费者登录
                                window.location.href = "index.html"
                            }else{
                                //卖家登录
                                window.location.href="index2.html"
                            }
                        }else{
                            alert("账号或密码错误")
                        }
                    }
                })
            }

        })

        //忘记密码按钮绑定事件
        $("#forgetBtn").click(function (){
            window.location.href="forgetPwd.html"
        })
    })



</script>

<div id="top"></div>
<div id="module"></div>
    <form id="form" >
        <div id="login">登录</div>
        <label for="username">用户名</label><input type="text" name="username" id="username" /><span id="nameError" class="error"></span>
        <br><br>
        <label for="password">密&nbsp;&nbsp;码</label><input type="password" name="password" id="password" /><span id="passwordError" class="error"></span>
        <br><br>
        <label for="code">验证码</label><input type="text" id="code" /><input type="button" id="codeBtn" /><span id="codeError" class="error"></span>
        <br><br>
        <label for="autoLogin"></label><input id="autoLogin" name="auto" type="checkbox" />&nbsp;&nbsp;一周以内自动登录
        <br>
        <input type="button" id="loginBtn" value="登录"/>
        <input type="button" id="forgetBtn" value="忘记密码"/>
    </form>
<div id="bottom"></div>
</body>
</html>